<template>
  <div id="pingjia">
      <div>
        <group title="">
            <cell :title="'描述相符'" >
              <img slot="icon" width="20" style="display:block;margin-right:5px;" src="static/bottom/pingjia@2x.png">
              <rater v-model="data1"></rater>
              <span>{{'非常好'}}</span>
            </cell>
          <!-- <cell title="change color">
            <rater v-model="data3" :max="6" active-color="#04BE02"></rater>
          </cell> -->
        </group>
      </div>
      <div>
             <group :title="('反馈')">
            <x-textarea :max="200" name="description" :placeholder="('宝贝满足您的期望吗，请留下您的使用心得，分享给想买的他们吧')"></x-textarea>
            </group>
      </div>
      <div>
            <checklist title="" required :options="commonList"  @on-change="change"></checklist>

      </div>

            <div>
        <group title="服务评分">
            
            <cell title="物流服务" >
              <rater v-model="data2"></rater>
            </cell>

          <cell title="服务态度">
            <rater v-model="data3" ></rater>
          </cell>

        </group>
      </div>
      <div class="pj_btn">
        <x-button type="primary">发布</x-button>
      </div>
  </div>
</template>

<script>
import { CellBox, Checklist,XTextarea, Rater, Group, Cell, Range,XButton } from 'vux'

export default {
  components: {
    CellBox, 
    Checklist,
    XTextarea, 
    Rater,
    Group,
    Cell,
    Range,
    XButton
  },
  data () {
    return {
      commonList: ['匿名'],
      data1: 5,
      data2: 5,
      data3: 5,
 
    }
  },
   methods: {
    change (e) {
      console.log(e)
    },
  },
}
</script>
<style>
.pj_btn{
  width: 10rem;
  margin: auto;
  margin-top: 5rem;
}
</style>
